<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="/js/jquery-1.8.0.js"></script>
    <script>
        $(function (){
            $(".bigName").each(function() {
                var $this = $(this);
                var bigId = $this.data("id");
                $.ajax({
                    url: "GoodsServlet",
                    data: {flag: "searchCateBigName", bigId: bigId},
                    success: function (data) {
                        $this.val(data);
                    }
                });
            });

            $(".smallName").each(function() {
                var $this = $(this);
                var smallId = $this.data("id");
                $.ajax({
                    url: "GoodsServlet",
                    data: {flag: "searchCateSmallName", smallId: smallId},
                    success: function (data) {
                        $this.val(data);
                    }
                });
            });
        });
    </script>

    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        .box {
            flex: 1; /* 两个部分等宽 */
            margin: 10px;
            padding: 20px;
            border: 1px solid black;
        }

    /*   页面css  */

        .divImg {
            width: 130px;
            height: 180px;
            background-color: #ADD2DA; /* 使用背景色作为图片加载前的占位符 */
            position: relative; /* 使子元素可以相对于这个容器定位 */
            overflow: hidden; /* 隐藏超出容器的图片部分 */
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 4px; /* 添加圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            padding: 5px; /* 内边距，使图片不会紧贴边框 */
            text-align: center; /* 文本和图片居中 */
        }
        .preview {
            width: 100%; /* 图片宽度设置为容器宽度的100% */
            height: 100%; /* 图片高度设置为容器高度的100% */
            object-fit: cover; /* 保持图片的宽高比，同时填充整个元素的内容框 */
            display: block; /* 消除图片底部的间隙 */
            margin: auto; /* 水平和垂直居中（与 text-align: center 配合使用）*/
        }
        /* 可选：添加加载指示器或占位符图片 */
        .preview {
            /* 这里可以添加加载指示器的样式，或者使用一个占位符图片 */
            /*background: url('http://localhost:8080/images/addPic.jpg') no-repeat center center;*/
            background-size: cover;
            background-position: center center; /* 将背景图片水平和垂直居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            display: block; /* 消除元素底部的间隙 */
            margin: auto; /* 水平居中（但此处对背景图像无效，主要用于块级元素内容居中）*/
        }

        /* 历史版本表格样式 */
        .history-table {
            background-color: #f4f4f9; /* 浅灰色背景 */
            border: 2px solid #ddd; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
        }

        .history-table tr:nth-child(even) {
            background-color: #f9f9fb; /* 偶数行浅蓝色背景 */
        }

        .history-table th,
        .history-table td {
            padding: 8px; /* 单元格内边距 */
            text-align: left; /* 文本左对齐 */
        }

        /* 现有版本表格样式 */
        .current-table {
            background-color: #ffffff; /* 白色背景 */
            border: 2px solid #8bc34a; /* 绿色边框 */
            border-radius: 5px; /* 边框圆角 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
        }

        .current-table tr:nth-child(even) {
            background-color: #f2f2f2; /* 偶数行浅灰色背景 */
        }

        .current-table th,
        .current-table td {
            padding: 8px; /* 单元格内边距 */
            text-align: left; /* 文本左对齐 */
        }
    </style>

</head>

<body>


<div class="container">
    <div class="box">
        <h2>历史版本</h2>
        <!-- 这里可以放置你的内容 -->
        <table class="edit_table history-table" >
            <tr>
                <td class="td_info">商品名称:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="goodsName" value="${goodsHis.goodsName }" id="goodsName_1"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">价格:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="price" value="${goodsHis.price }"id="price_1"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">单位:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="unit" value="${goodsHis.unit }" id="unit_1"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">厂商:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="producter" value="${goodsHis.producter }" id="producter_1"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">大分类:</td>
                <td class="td_input_short">
                    <input type="text" class="bigName"  name="bigcateId" value="${goodsHis.bigCateId}" data-id="${goodsHis.bigCateId}"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">小分类:</td>
                <td class="td_input_short">
                    <input type="text" class="smallName"  name="smallcateId" value="${goodsHis.smallCateId}" data-id="${goodsHis.smallCateId}"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">图片:</td>
                <td>
                    <div class="divImg" class="image-preview">
                        <img class="preview" src="GoodsServlet?flag=showHisPic&goodsId=${goodsHis.id }" onerror="this.onerror=null; this.src='http://localhost:8080/images/addPic.jpg';">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td_info">备注:</td>
                <td class="td_input_short">
                    <textarea rows="4" cols="27" name="des" class="txtarea" > ${goodsHis.des }</textarea>
                </td>
            </tr>
        </table>
    </div>
    <div class="box">
        <h2>现有版本</h2>
        <!-- 这里可以放置你的内容 -->
        <table class="edit_table current-table" >
            <tr>
                <td class="td_info">商品名称:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="goodsName" value="${goods.goodsName }" id="goodsName_2"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">价格:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="price" value="${goods.price }"id="price_2"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">单位:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="unit" value="${goods.unit }" id="unit_2"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">厂商:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="producter" value="${goods.producter }" id="producter_2"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">大分类:</td>
                <td class="td_input_short">
                    <input type="text" class="bigName"  name="bigcateId" value="${goods.bigCateId}" data-id="${goods.bigCateId}"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">小分类:</td>
                <td class="td_input_short">
                    <input type="text" class="smallName"  name="smallcateId" value="${goods.smallCateId}" data-id="${goods.smallCateId}"/>
                </td>
            </tr>
            <tr>
                <td class="td_info">图片:</td>
                <td>
                    <div class="divImg" class="image-preview">
                        <img class="preview" src="GoodsServlet?flag=showPic&goodsId=${goods.id }" onerror="this.onerror=null; this.src='http://localhost:8080/images/addPic.jpg';">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td_info">备注:</td>
                <td class="td_input_short">
                    <textarea rows="4" cols="27" name="des" class="txtarea" > ${goods.des }</textarea>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>